<script setup lang="ts">
import { useTyphoonStore } from '@/store'

const typhoonStore = useTyphoonStore()
const partialWindLayerChecked = ref(true)
const globalWindLayerChecked = ref(true)

watch([partialWindLayerChecked, globalWindLayerChecked], ([newPartial, newGlobal]) => {
  typhoonStore.partialWindLayerShow = newPartial
  typhoonStore.globalWindLayerShow = newGlobal
})
</script>

<template>
  <div class="setting-panel">
    <el-checkbox v-model="partialWindLayerChecked" label="局部风场" size="large" />
    <el-checkbox v-model="globalWindLayerChecked" label="全球风场" size="large" />
  </div>
</template>

<style scoped>
.setting-panel {
  position: absolute;
  top: 6vh;
  right: 1vw;
  overflow: hidden;
  padding: 5px;
  color: #fff;
  background-color: #04263797;
  border-radius: 0.3rem;
  display: flex;
  flex-direction: row;
}
</style>
